<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center testExamination_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub testExamination_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  testExamination_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='testExamination_fd0_0_c1'>验车信息</text>
				<view class='flex flex-wrap align-center testExamination_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="content1" v-if="type == 2">
				<view class="content_title">发车里程及油量</view>
				<view class="mileage flex align-center">
					<view class="mileage_1">发车里程(km)</view>
					<input v-model="sc_work_order.km" :disabled="true" class="mileage_2" type="number" placeholder="0"
						placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
				</view>
				<view class="mileage flex align-center justify-between">
					<view class="mileage_1">发车油量/电量</view>
					<input v-model="sc_work_order.oil" class="mileage_2" type="number" placeholder="0"
						placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)" :disabled="true">
					<text>%</text>
					<!-- <u-icon style="margin-left: 8rpx;" name="arrow-right" color="#999999" size="24"></u-icon> -->
				</view>
			</view>

			<view class="content1">
				<view class="content_title">里程及油量</view>
				<view class="mileage flex align-center">
					<view class="mileage_1">当前里程(km)</view>
					<input v-model="km" class="mileage_2" type="number" placeholder="0"
						placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
					<view class="jisuan" v-if="type == 2" @tap.stop="countKm">确定</view>
				</view>
				<view class="mileage flex align-center justify-between">
					<view class="mileage_1">当前油量/电量</view>
					<input v-model="oilValue" class="mileage_2" type="number" placeholder="请输入油量/电量"
						placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)" :disabled="false">
					<text style="margin-left: 5rpx;">%</text>
					<view class="jisuan" v-if="type == 2" @tap.stop="countQuantity">确定</view>
					<!-- <u-icon style="margin-left: 8rpx;" name="arrow-right" color="#999999" size="24"></u-icon> -->
				</view>
			</view>
			<view class="content1" style="padding-bottom: 20rpx;" v-if="type == 2">
				<view class="content_title">其他费用</view>
				<template v-if="over_km > 0">
					<view class="mileage flex align-center justify-between">
						<view class="mileage_1">超出里程(km)</view>
						<input v-model="over_km" class="mileage_2" type="number" placeholder="0"
							placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)" :disabled="true">
					</view>
					<view class="mileage flex align-center justify-between">
						<view class="mileage_1">超出里程费用</view>
						<input v-model="over_km_price" class="mileage_2" type="number" placeholder="0"
							placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
						<u-icon @click="over_km_price = 0" style="margin-left: 24rpx;" name="close" size="26"
							color="#999999"></u-icon>
					</view>
				</template>
				<template v-if="differenceShow">
					<view class="mileage flex align-center justify-between">
						<view class="mileage_1">油量/电量差异</view>
						<input v-model="differenceOil" :disabled="true" class="mileage_2" type="number" placeholder="请输入油量/电量" placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
						<text style="margin-left: 5rpx;">%</text>
					</view>
				</template>
				<template v-if="startInfo.timeout_price > 0">
					<view class="mileage flex align-center justify-between">
						<view class="mileage_1">超时时间(小时)</view>
						<input v-model="startInfo.timeout_hours" class="mileage_2" type="number" placeholder="0"
							placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)" :disabled="true">
					</view>
					<view class="mileage flex align-center justify-between">
						<view class="mileage_1">超时费用</view>
						<input v-model="startInfo.timeout_price" class="mileage_2" type="number" placeholder="0"
							placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
						<u-icon @click="startInfo.timeout_price = 0" style="margin-left: 24rpx;" name="close" size="26"
							color="#999999"></u-icon>
					</view>
				</template>
				<view class="mileage flex align-center justify-between" v-for="(v, k) in other_price" :key="k">
					<view class="mileage_1">{{v.key}}</view>
					<input v-model="v.value" class="mileage_2" type="number" placeholder="0"
						placeholder-style="font-size:28rpx;color:rgba(0,0,0,0.8)">
					<u-icon @click="delOtherPrice(k)" style="margin-left: 24rpx;" name="close" size="26"
						color="#999999"></u-icon>
				</view>
				<view class="add_price flex align-center justify-center" @tap="chargeShow=true">
					<image :src='STATIC_URL+"255.png"' mode="aspectFill"></image>
					<text>添加收费项</text>
				</view>

			</view>
			<template v-if="userInfo.customer_id == 1">
				<view class="content1" v-if="type == 2">
					<view class="content_title">车辆归属门店</view>
					<view class="mileage flex align-center justify-between" @tap.stop="pickerDiy1658997072074=true">
						<view class="mileage_1">门店</view>
						<view class="mileage_2">{{store_name}}</view>
						<u-icon style="margin-left: 8rpx;" name="arrow-right" color="#999999" size="24"></u-icon>
					</view>
				</view>
			</template>
			<view class="content2">
				<view class="content_title">
					<view class="">验车照片</view>
				</view>
				<view class="flex flex-wrap align-stretch flex feedback_fd2_2">
					<view v-for="(image, index) in imgList" :key="index" class='flex position-relative feedback_fd2_20'>
						<text @tap.stop="delImg(index)"
							class='fu-iconfont2 position-absolute feedback_fd2_200'>&#xE8E7;</text>
						<image @tap.stop="previewImage(index)" class='feedback_fd2_201' mode="aspectFill" :src='image'>
						</image>
					</view>

					<view class='feedback_fd2_21' @tap.stop="uploadImg" v-if="imgList.length < 9">
						<image mode="aspectFill" :src='STATIC_URL+"495.png"'></image>
						<view class="">添加图片</view>
					</view>
				</view>
			</view>
			<view class="content2">
				<view class="content_title">
					<view class="">验车视频</view>
				</view>
				<view class="flex flex-wrap align-stretch flex feedback_fd2_2">
					<view class='flex position-relative feedback_fd2_20' v-if="video">
						<video id="video" class="up_video" :src="video" :autoplay="false" @play="playVedio"
							@error="videoError"></video>
					</view>

					<view class='feedback_fd2_21' @tap.stop="uploadVideo">
						<image mode="aspectFill" :src='STATIC_URL+"495.png"'></image>
						<view class="">添加视频</view>
					</view>
				</view>
			</view>

			<view class="flex align-center justify-between feedback_flex_4">
				<view class='feedback_fd4_0' @tap.stop="submitCheckCar">提交</view>
			</view>
		</template>

		<view style="height: 130rpx;"></view>

		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1658997072074" :label.sync='store_name'
			:value.sync='store_id' :options='storeList' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='100' default-type='id' :default-props='{"label":"name","value":"id"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">车辆归属门店</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="select_btn flex align-center justify-between">
					<view class="select_btn_1 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="select_btn_2 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>

		<u-popup v-model="chargeShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">收款类别</view>
				<view class="charge_list">
					<view class="charge_item flex align-center justify-center" v-for="(v, k) in collectionList" :key="k"
						@tap.stop="selectCollection(k)" :class="collectionIndex == k ? 'active_item' : ''">
						<image :src='STATIC_URL+"471.png"' mode="aspectFill" v-if="v.isSelect && collectionIndex == 3">
						</image>
						<text>{{v.name}}</text>
					</view>
				</view>
				<template v-if="collectionIndex == 3">
					<view class="title_text">新增类别</view>
					<view class="input_view">
						<input v-model="collection_name" class="input" type="text" placeholder="请输入收款类别"
							placeholder-style="font-size:32rpx;color:#999;">
					</view>
				</template>

				<view class="title_text">收款金额</view>
				<view class="input_view flex align-center">
					<text class="money_icon">￥</text>
					<input v-model="collection_price" style="padding: 0 30rpx 0 16rpx;" class="input" type="number"
						placeholder="请输入金额" placeholder-style="font-size:32rpx;color:#999;">
				</view>
				<view class="operation flex align-center justify-between">
					<view class="operation_1 flex align-center justify-center" @tap.stop="cancelCollection">取消</view>
					<view class="operation_2 flex align-center justify-center" @tap.stop="confirmCollection">确定</view>
				</view>
				<view class="pop_bg"></view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				"chargeShow": false,
				"pickerDiy1658997072074": false,
				"id": "",
				"name": "",
				"km": "",
				"oil": "",
				oilList: [],
				oilLable: "100",
				oilValue: 100,
				imgList: [],
				video: "",
				order_id: "",
				type: 1, // 1发 2收
				is_submit: false,

				collectionList: [{
						name: '车损费',
						isSelect: true,
						id: 0
					},
					{
						name: '违章费用',
						isSelect: false,
						id: 1
					},
					{
						name: '油费',
						isSelect: false,
						id: 2
					},
					{
						name: '新增类别',
						isSelect: false,
						id: 3
					}
				],
				collectionIndex: 0,
				collection_name: "",
				collection_price: "",
				other_price: [],
				isShow: true,

				startInfo: {
					timeout_hours: 0,
					timeout_price: 0
				}, // 超时费用
				sc_work_order: {}, // 发车验车信息
				over_km: 0, // 超公里数
				over_km_price: 0, // 超公里数金额
				differenceOil: 0,  // 油电量差异
				differenceShow: false,
				store_id: "",
				store_name: "",  // 门店名称
				storeList: [],  // 门店列表
				userInfo: {},
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				order_id,
				type
			} = options
			this.order_id = order_id || '';
			this.type = type || '1';
			this.userInfo = global.userInfo;
			if (this.type == 2) {
				this.getCheckCarBefore();
			} else {
				setTimeout(() => {
					this.isShow = false;
				}, 300)
			}
			
			this.initOil();
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 设置油量列表
			initOil() {
				let oilList = [];
				for (let i = 1; i <= 100; i++) {
					oilList.push({
						name: i,
						value: i
					})
				}
				this.oilList = oilList;
			},

			// 还车时创建工单  postcheckCarBefore
			getCheckCarBefore() {
				this.$api.post(global.apiUrls.postcheckCarBefore, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.startInfo = res.data.data;
						this.sc_work_order = res.data.data.sc_work_order;
						this.store_id = res.data.data.store_id;
						this.getStoreList();
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 获取门店列表  postStore
			getStoreList() {
				this.$api.post(global.apiUrls.postStore, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.storeList = res.data.data;
						if (res.data.data.length > 0) {
							res.data.data.forEach((v, k) => {
								if (v.id == this.store_id) {
									this.storeInfo = v;
									this.store_name = v.name;
								}
							})
						}
						console.log(this.storeInfo);
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			
			// 计算超公里费用  postcheckKmPrice
			countKm() {
				if (!this.km) {
					this.$message.info('请输入里程数');
					return;
				}
				if (this.km < 0) {
					this.$message.info('请输入正确的里程数');
					return;
				}
				uni.showLoading({
					title: '计算中'
				})
				this.$api.post(global.apiUrls.postcheckKmPrice, {
					order_id: this.order_id,
					km: this.km
				}).then(res => {
					// console.log(res);
					uni.hideLoading();
					if (res.data.code == 1) {
						this.over_km = res.data.data.over_km;
						this.over_km_price = res.data.data.over_km_price;
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 计算油量/电量差异
			countQuantity() {
				uni.showLoading({
					title: '计算中'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 200)
				this.differenceOil = this.sc_work_order.oil - this.oilValue;
				this.differenceShow = true;
			},

			// 提交验车信息  postCheckCar
			submitCheckCar() {
				if (this.is_submit) return;
				if (!this.km) {
					this.$message.info('请输入里程数');
					return;
				}
				if (this.km < 0) {
					this.$message.info('请输入正确的里程数');
					return;
				}
				if (this.oilValue < 0) {
					this.$message.info('请输入正确的油量/电量');
					return;
				}
				if (this.imgList.length == 0) {
					this.$message.info('请上传验车照片');
					return;
				}
				if (this.type == 1) {
					if (!this.video) {
						this.$message.info('请上传验车视频');
						return;
					}
				}
				let other_price = "";
				if (this.type == 2) {
					other_price = this.other_price.reduce((acc, obj) => {
						acc[obj.key] = Number(obj.value);
						return acc;
					}, {});
				}
				this.is_submit = true;
				this.$api.post(global.apiUrls.postCheckCar, {
					order_id: this.order_id,
					type: this.type,
					km: this.km,
					oil: this.oilValue,
					image: this.imgList.length > 0 ? this.imgList.join('|') : "",
					video: this.video,
					over_km: this.type == 2 ? this.over_km : "",
					over_km_price: this.type == 2 ? this.over_km_price : "",
					timeout_hours: this.type == 2 ? this.startInfo.timeout_hours : "",
					timeout_price: this.type == 2 ? this.startInfo.timeout_price : "",
					other_price: this.type == 2 ? (other_price == '{}' ? "" : JSON.stringify(other_price)) : "",
					store_id: this.type == 2 ? this.store_id : ""
				}).then(res => {
					console.log(res);
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						setTimeout(() => {
							this.is_submit = false;
							this.differenceShow = true;
							uni.navigateBack();
						}, 800)
					} else {
						this.is_submit = false;
					}
				}).catch(err => {
					console.log(err);
					this.is_submit = false;
				})
			},
			cancelCollection() {
				this.collectionIndex = 0;
				this.collection_name = "";
				this.collection_price = 0;
				this.chargeShow = false;
			},
			confirmCollection() {
				if (this.collectionIndex == 3) {
					if (!this.collection_name) {
						this.$message.info('请输入收款类别');
						return;
					}
				}
				if (!this.collection_price) {
					this.$message.info('请输入收款金额');
					return;
				}
				if (this.collection_price < 0) {
					this.$message.info('请输入正确的收款金额');
					return;
				}
				if (this.collectionIndex != 3) {
					this.other_price.push({
						key: this.collectionList[this.collectionIndex].name,
						value: this.collection_price
					})
				} else {
					this.other_price.push({
						key: this.collection_name,
						value: this.collection_price
					})
				}
				this.cancelCollection();
			},
			selectCollection(index) {
				this.collectionIndex = index;
				this.collectionList.forEach((v, k) => {
					v.isSelect = false;
				})
				this.collectionList[index].isSelect = !this.collectionList[index].isSelect;
				this.$forceUpdate();
			},
			delOtherPrice(index) {
				this.other_price.splice(index, 1);
				this.countPrice();
			},
			// 视频上传
			uploadVideo() {
				let _this = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: false,
					success: (chooseImageRes) => {
						console.log(chooseImageRes);
						const tempFilePath = chooseImageRes.tempFilePath;
						uni.showLoading({
							title: '上传中'
						})
						_this.$api.get(global.apiUrls.aliOss, {
							dirname: "vadios",
							ext: "mp4"
						}).then(res => {
							console.log(res);
							if (res.data.code == 1) {
								uni.uploadFile({
									url: res.data.data.host, //仅为示例，非真实的接口地址
									filePath: tempFilePath,
									name: 'file',
									formData: {
										key: res.data.data.key,
										policy: res.data.data.policy,
										OSSAccessKeyId: res.data.data.access_id,
										signature: res.data.data.signature,
									},
									success: (uploadFileRes) => {
										console.log(uploadFileRes);
										uni.hideLoading();
										if (uploadFileRes.statusCode === 204) {
											_this.$message.info('上传成功');
											_this.video = res.data.data.url;
										}
								// 		let result = JSON.parse(uploadFileRes.data);
								// 		console.log(result);
								// 		if (result.code == 1) {
								// 			// _this.imgList.push(result.data.data.file_url);
								// 			// _this.maxImg = 9 - this.imgList.length;
								// 			_this.video = result.data.data.file_url;
								
								// 		} else {
								// 			_this.$message.info(result.data.info);
								// 		}
									},
									fail: (err) => {
										console.log(err);
										uni.hideLoading();
										_this.$message.info('视频上传失败，请重试');
									}
								});
							} else {
								this.$message.info(res.data.info);
							}
						})

					}
				});
			},
			playVedio() {
				uni.createVideoContext('video', this).requestFullScreen();
			},
			videoError() {
				this.$message.info('视频播放失败');
			},

			// 图片上传
			uploadImg() {
				let _this = this;
				uni.chooseImage({
					count: _this.maxImg,
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.BASE_URL + global.apiUrls.postUpload, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'image',
								formData: {
									image: 'image',
									type: 0,
									source: 0,
									// user_id: 3,
									user_id: global.userInfo.user_id
								},
								success: (uploadFileRes) => {
									uni.hideLoading();
									let result = JSON.parse(uploadFileRes.data);
									console.log(result);
									if (result.code == 1) {
										// _this.user.photo = result.data.photo;
										_this.imgList.push(result.data.data.file_url);
										_this.maxImg = 9 - this.imgList.length;
									} else {
										_this.$message.info(result.data.info);
									}
								},
								fail: (err) => {
									console.log(err);
									uni.hideLoading();
									_this.$message.info('图片上传失败，请重试');
								}
							});
						}

					}
				});
			},
			// 预览图片
			previewImage(index) {
				let _this = this;
				uni.previewImage({
					current: index,
					urls: _this.imgList
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1);
				this.maxImg = 6 - this.imgList.length;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.content1 {
		margin: 20rpx 24rpx 0;
		border-radius: 16rpx;
		background: #fff;
		padding: 0 24rpx;

		.mileage {
			padding: 28rpx 0;
			border-top: 1px solid #F3F3F3;

			.mileage_1 {
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);
			}

			.mileage_2 {
				text-align: right;
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);
				flex: 1;
			}
		}
	}

	.content2 {
		margin: 20rpx 24rpx 0;
		border-radius: 16rpx;
		background: #fff;
		padding: 0 24rpx;
	}

	.content_title {
		font-weight: bold;
		font-size: 30rpx;
		color: #000;
		padding: 30rpx 0;

		.title_ri {
			.title_ri_text {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}
		}
	}

	.car_title {
		font-weight: 400;
		font-size: 26rpx;
		color: #111111;
		margin: 0 0 16rpx;
	}

	.img_list {
		overflow: hidden;

		.img_item {
			width: 118rpx;
			height: 118rpx;
			float: left;
			margin-right: 16rpx;
			margin-bottom: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}

		.img_item:nth-child(5n+5) {
			margin-right: 0;
		}
	}

	.personalInformation_fd1_0 {
		padding: 28rpx 0;
		border-top: 2rpx solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_1_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #111;
		text-align: right;
	}



	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}

	.jisuan {
		color: #1A66FA;
		margin-left: 24rpx;
	}

	.select_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}

	.select_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}

	.select_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}


	.feedback_fd2_2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		padding: 24rpx 0 8rpx;
		border-top: 1px solid #eee;
	}

	.feedback_fd2_20 {
		margin: 0rpx 16rpx 16rpx 0rpx;
	}

	.feedback_fd2_20:nth-child(4n+4) {
		margin-right: 0;
	}

	.feedback_fd2_200 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.up_video {
		width: 148rpx;
		height: 148rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.feedback_fd2_201 {
		width: 148rpx;
		height: 148rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.feedback_fd2_21 {
		width: 148rpx;
		height: 148rpx;
		margin: 0rpx 16rpx 16rpx 0rpx;
		border-radius: 16rpx;
		background: #F6F7FB;
		text-align: center;
		padding-top: 34rpx;

		image {
			width: 45rpx;
			height: 45rpx;
		}

		view {
			font-weight: 500;
			font-size: 20rpx;
			color: #999;
			margin-top: 18rpx;
		}
	}

	.feedback_fd2_22 {
		font-size: 24rpx;
		color: #BFBFBF;
		font-weight: 400;
		width: 100%;
		line-height: 33rpx;
	}


	.feedback_fd4_0 {
		width: 702rpx;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background: #1A66FA;
	}

	.feedback_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		position: fixed;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		display: flex;
		justify-content: center;
		background: #fff;
	}

	.add_price {
		background: #F0F5FF;
		border-radius: 16rpx;
		border: 2rpx solid #A5BAE4;
		padding: 26rpx 0;
		font-weight: 500;
		font-size: 30rpx;
		color: #1A66FA;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.deductible_popup {
		width: 626rpx;
		position: relative;

		.pop_title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #222222;
			padding: 40rpx 0 12rpx;
		}

		.pop_tips {
			padding: 0 38rpx;
			margin-top: 16rpx;

			.tips_le {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: #1A66FA;
				margin-right: 16rpx;
				transform: translateY(16rpx);
			}

			.tips_ri {
				width: calc(100% - 24rpx);
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 36rpx;
			}
		}

		.pop_btn {
			width: 548rpx;
			height: 88rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 66rpx auto 52rpx;
		}

		.pop_bg {
			width: 100%;
			height: 220rpx;
			background: linear-gradient(180deg, rgba(26, 102, 250, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 32rpx 32rpx 0px 0px;
			position: absolute;
			top: 0;
			left: 0;
		}

		.title_text {
			padding: 36rpx 40rpx 22rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}

		.input_view {
			width: 548rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #1A66FA;
			padding: 24rpx 0rpx;
			margin: 0 40rpx;

			.input {
				padding: 0 30rpx;
			}

			.money_icon {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A66FA;
				margin-left: 30rpx;
			}
		}

		.operation {
			margin: 46rpx 0;
			padding: 0 40rpx;

			.operation_1 {
				width: 266rpx;
				height: 88rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}

			.operation_2 {
				width: 266rpx;
				height: 88rpx;
				background: #1A66FA;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.charge_list {
			overflow: hidden;
			padding: 10rpx 40rpx 0;
			position: relative;
			z-index: 10;

			.charge_item {
				float: left;
				width: 174rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
			}

			.active_item {
				color: #1A66FA;
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
			}

			.charge_item:nth-child(3n+3) {
				margin-right: 0;
			}
		}
	}



	.testExamination_fd1_0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}

	.testExamination_fd1_0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_fd1_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
	}

	.testExamination_notAnfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		width: 750rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_anfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		width: 750rpx;
		height: 80rpx;
	}

	.testExamination_areafd1_1_c0 {
		min-height: 80rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_notAnfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_anfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_anfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_anfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_areafd1_1_c0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 40rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 15rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 147, 255, 1);
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c2 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c3 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c4 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c5 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c1 {
		font-size: 26rpx;
		color: rgba(191, 191, 191, 1);
	}

	.testExamination_areafd1_1_c0_c0_c1 {
		background: rgba(242, 242, 242, 1);
		background-size: 100% !important;
		width: 602rpx;
		height: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.testExamination_progress1_areafd1_1_c0_c0_c1 {
		background: rgba(21, 147, 255, 1);
		background-size: 100% !important;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.testExamination_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.testExamination_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.testExamination_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.testExamination_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.testExamination_flex_0 {
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png);
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat #f6f7fb;
		background-size: 100% auto !important;
	}
</style>